<template>
    <div class="color">
        <input v-model.number="leftNum" type="number" />
        <select v-model="rule">
            <option value="+">加法</option>
            <option value="-">减法</option>
            <option value="*">乘法</option>
            <option value="/">除法</option> 
        </select>
        <input v-model.number="rightNum" type="number"/>
        <button @click="calculate">=</button>
        <div class="result">结果: {{ resultNum }}</div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            leftNum: 1,
            rightNum: 1,
            resultNum: null,
            rule: "-"
        } 
    },
    methods: {
        calculate() {
            if (this.rule === "+") {  this.resultNum = this.leftNum + this.rightNum;}
            else if (this.rule === "-")  {  this.resultNum = this.leftNum - this.rightNum; }
            else if (this.rule === "*") {  this.resultNum = this.leftNum * this.rightNum; }
            else if (this.rule === "/") {
                // 处理除法特殊情况
                if (this.rightNum === 0) {
                    this.resultNum = "除数不能为0";} 
                else {
                    this.resultNum = this.leftNum / this.rightNum;
                     }
            } 
        }
    }
}
</script>

<style>
.color {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 20px;
    font-family: Arial, sans-serif;
}

input, select, button {
    padding: 8px 12px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

button {
    background-color: #42b983;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #359e75;
}

.result {
    margin-left: 10px;
    font-size: 18px;
    color: #333;
    min-width: 120px;
}
</style>
